<template>
  <view class="comment-page">
    <view class="comment-input-wrapper">
      <input type="text" class="comment-input" placeholder="请输入评论" v-model="commentContent"/>
    </view>
    <button class="submit-button" @click="submitComment">发表评论</button>
    <view class="comment-list">
      <view class="comment-item" v-for="(comment, index) in comments" :key="index">
        {{ comment }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      commentContent: '', 
      comments: []
    };
  },
  methods: {
    submitComment() {
      if (this.commentContent.trim() === '') {
        uni.showToast({
          title: '评论内容不能为空',
          icon: 'none'
        });
        return;
      }
      this.comments.push(this.commentContent);
      this.commentContent = '';
    }
  }
}
</script>

<style>
.comment-page {
  padding: 20px;
}

.comment-input-wrapper {
  margin-bottom: 20px;
}

.comment-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.submit-button {
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>